<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 结构伪类 */
        /* 选中第一个 li  怎么办 */

        /* E:first-child   */
        /* 找的不是 E元素 里边的  孩子(子元素) */

        /* 而是  E元素的父元素  ,它里边的 孩子 */

        /* 而且匹配到的 子元素 还必须 符合  E 的  规则 */

        li:first-child{
            color: red;
        }
        /* 不起作用 思考原因 */
        /* .item:last-child{
            color: red;
            
        } */
        li:last-child{
            color: red;
        }


        /* 第五个子元素 */
        /* nth-child(n)  n  从1 开始的 自然数 */
        li:nth-child(5){
            color: orange;
        }


        /* 想实现  奇数行 红色 
        偶数行 蓝色 */

        li:nth-child(2n){
            color: blue;
        }
        li:nth-child(2n+1){
            color: red;
        }
        li:nth-child(5n){}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="item">3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>